<template>
  <div class="left-navigation-container">
    <div class="head flex flex-col items-center">
      <img class="icon" src="../../../icons/svg/productAssistant/productAss_icon.svg" />
      <van-button class="create-msg-btn" plain round icon="plus" color="#436BFF" type="primary" @click="newMsg"> 新建对话 </van-button>
      <van-divider class="w-full" style="margin-bottom: 0px;">推荐记录</van-divider>
    </div>
    <recordList class="list" @onSelectItem="() => $emit('onClose')" />
  </div>
</template>

<script setup>
import { ref, defineEmits } from "vue";
import recordList from "./recordList.vue";
import { useProductStore } from '@/store';

const store = useProductStore()
const emit = defineEmits(['onClose'])

function newMsg() {
  store.newMsg()
  emit('onClose')
}
</script>

<style lang="less" scoped>
.left-navigation-container {
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: constant(safe-area-inset-bottom); 
  padding-bottom: env(safe-area-inset-bottom); 

  .head {
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .list {
    overflow-y: auto;
    flex: 1;
  }

  .icon {
    width: 72px;
    border-radius: 8px;
    background-color: #e5eeff;
    padding: 16px;
    margin-bottom: 24px;
  }

  .create-msg-btn {
    height: 32px;
    width: 116px;
  }
}
</style>
